---
title: Use with Gatsby - Flowbite React
description: Learn how to install Flowbite React for your Gatsby project and start building websites with an open-source static site generator built on top of React and GraphQL
---

This guide provides three ways to integrate Flowbite React with Gatsby:

1. [Quick Start](#quick-start): Create a new project with everything pre-configured
2. [Add to Existing Project](#add-to-existing-project): Add Flowbite React to an existing Gatsby project
3. [Manual Setup](#manual-setup): Set up everything from scratch manually

<TextDivider>Quick Start (Recommended)</TextDivider>

## Quick Start

The fastest way to get started is using our project creation CLI, which sets up a new Gatsby project with Flowbite React, Tailwind CSS, and all necessary configurations:

```bash
npx create-flowbite-react@latest -t gatsby
```

This will:

- Create a new Gatsby project
- Install and configure Tailwind CSS
- Set up Flowbite React with all required dependencies
- Configure dark mode support
- Set up example components

<TextDivider>Add to Existing Project</TextDivider>

## Add to Existing Project

If you already have a Gatsby project and want to add Flowbite React, you can use our initialization CLI:

```bash
npx flowbite-react@latest init
```

This will automatically:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Set up necessary configurations for dark mode

<TextDivider>Manual Setup</TextDivider>

## Manual Setup

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

### 1. Create Project

Create a new Gatsby project with Tailwind CSS:

```bash
npm init gatsby
```

When prompted:

- Select `"Tailwind CSS"` to `"Would you like to install a styling system?"` question.

(Omit this when Gatsby CLI tailwind template is updated to v4.)

> **Note:** Install the correct version of Tailwind CSS, Gatsby CLI installs Tailwind CSS v4 by default but their template is configured for v3:

```bash
npm install -D tailwindcss@^3
```

### 2. Install Flowbite React

Install Flowbite React:

```bash
npx flowbite-react@latest init
```

This will:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Configure Vite to include Flowbite React plugin

### 3. Configure Dark Mode

In server side rendered applications like Gatsby, to avoid page flicker when dark mode is set, you need to configure the `ThemeModeScript` component:

1. Create `gatsby-ssr.js` file at the root folder of the project:

```js
// gatsby-ssr.js
export const onRenderBody = ({ setPreBodyComponents }) => {
  setPreBodyComponents([]);
};
```

2. Import `ThemeModeScript` and add it to `setPreBodyComponents` function:

```js {2,5}
// gatsby-ssr.js
import { ThemeModeScript } from "flowbite-react";

export const onRenderBody = ({ setPreBodyComponents }) => {
  setPreBodyComponents([ThemeModeScript]);
};
```

## Try it out

Now that you have successfully installed Flowbite React you can start using the components from the library:

```tsx
// src/pages/index.tsx (or .jsx)
import { Button } from "flowbite-react";

export default function IndexPage() {
  return <Button>Click me</Button>;
}
```

<hr />

## Templates

- [Github](https://github.com/themesberg/flowbite-react-template-gatsby)
- [StackBlitz](https://stackblitz.com/edit/flowbite-react-template-gatsby)
